<template>

   <div>
     <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%" 
   border="true"
    >
     <el-table-column class="el-size"
      label="ID"
      width="60px"
      prop="id">
    </el-table-column>
    <el-table-column class="el-size"
      label="姓名"
      width="65px"
      prop="name">
    </el-table-column>
     <el-table-column
      label="手机号码"
      prop="phone"
      width="110px"
      >
    </el-table-column>
     <el-table-column
      label="处理机构"
      width="80px"
      prop="organization">
    </el-table-column>
  <el-table-column
      label="处理人"
      width="75px"
      prop="handler">
    </el-table-column>
    <el-table-column
      label="处理状态"
      width="90px"
      prop="status">
      <template slot-scope="scope">
					<el-tag size="small" v-if="scope.row.status ===1" type="danger" >待转发</el-tag>
             	<el-tag size="small" v-else-if="scope.row.status ===2" type="primary" >已转发</el-tag>
          	<el-tag size="small" v-else-if="scope.row.status ===4" type="primary" >处理中</el-tag>
					<el-tag size="small" v-else-if="scope.row.status ===5" type="warning" >已结案</el-tag>
          	<el-tag size="small" v-else-if="scope.row.status ===6" type="success" >已归档</el-tag>
				</template>
    </el-table-column> 
     <el-table-column
      label="地址"
      width="100px"
      prop="address">
    </el-table-column>  
    <el-table-column
      label="来访时间"
      width="100px"
      prop="start">
    </el-table-column>  
     <el-table-column
      label="结案时间"
      width="100px"
      prop="end">
    </el-table-column>  
    <el-table-column
       width="120px" 
       label="案件描述"
       prop="casfile"> 
     </el-table-column>
      <el-table-column
      label="备注"
      width="120px"
      prop="remarks">
    </el-table-column>  
     <el-table-column
      label="证据文件"
      width="80px"
      prop="file">
       <template slot-scope="scope">
        <div class="bule-font-color"  @click="downLoad(scope.row.file)" v-if="scope.row.file"><font color="#409EFF">查看文件</font></div>
      </template>
    </el-table-column> 

<el-table-column
      label="结案文件"
      width="80px"
      prop="documents">
       <template slot-scope="scope">
        <div class="bule-font-color"  @click="downLoad(scope.row.documents)" v-if="scope.row.documents"><font color="#67C23A">查看文件</font></div>
      </template>
    </el-table-column>  
       
      
    <el-table-column
    	width="150px"
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="姓名搜索"/>
      </template>
     <template  slot-scope="scope">
      
            <el-button
          size="mini"
          type="danger"
          v-if="hasAuth('sys:visits:achieve')"
          @click="handleReject(scope.$index, scope.row)">驳回</el-button>
            <el-button
          size="mini"
          type="success"
          v-if="hasAuth('sys:visits:achieve')"
          @click="handleAchieve(scope.$index, scope.row)">归档</el-button>
         </template>
    </el-table-column>
  </el-table>
  	<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[5, 10, 20, 50]"
				:current-page="current"
				:page-size="size"
				:total="total">
		</el-pagination>
   
	<el-dialog
				title="备注"
				:visible.sync="dialogVisible"
				width="600px"
				:before-close="handleClose">
			<el-form :model="editForm" ref="editForm" label-width="100px" class="demo-editForm">
     	<el-form-item label="ID" prop="id" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.id" autocomplete="off"></el-input>
				</el-form-item>
       <el-form-item label="姓名" prop="name" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remarks" label-width="100px">
					<el-input style="width: 300px" v-model="editForm.remarks" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('editForm')" style="display:block;margin:0 160px">提交</el-button>
					
				</el-form-item>
			</el-form>
		</el-dialog>
      </div>
    </template>
<script>

export default {
name:"Visit", 
data() {
      return {
        tableData: [],
        search: '',
        dialogVisible: false,
        isAchieve:'',
				editForm: {

				},

      }
    },
    methods: {
      handle(index, row) {  
       this.$axios.get("/file/manage?id="+row.id).then(res=>{
         if(res.data){
             this.$message({
						showClose: true,
						message: "操作成功",
						type: 'success',
						onClose:() => {
							this.getHandleList()
						}
					});
         }else{
           this.$message({
            showClose: true,
						message: "操作失败",
						type: 'error',
           })
         }
         
       })
      },
      handleReject(index, row) {
       this.editForm = row
       this.dialogVisible = true
       this.isAchieve=false
      },
       handleAchieve(index, row) {
       this.editForm = row
       this.dialogVisible = true
       this.isAchieve=true
      },
      handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getHandleList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getHandleList()
			},
      	submitForm(formName) {
      this.$axios.post('/file/'+(this.isAchieve?'achieve':'reject'),this.editForm).then(res =>{
         if(res.data){
             this.$message({
						showClose: true,
						message: "操作成功",
						type: 'success',
						onClose:() => {
							this.getHandleList()
						}
					});
           this.dialogVisible=false;
         }else{
           this.$message({
            showClose: true,
						message: "操作失败",
						type: 'error',
           })
         }
         
      })
    }
    ,
      getHandleList(){
        this.$axios.get("/file/handle",	{params: {
						current: this.current,
						size: this.size
					}}).then(res => {
          const data=res.data.data.records
           this.tableData=data
          this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
					// data.forEach(element => {
          //   element.file="https://www.gjtool.cn/pdfh5/git.pdf"
          // });
         
				})
      },
      downLoad(url){
     
     window.open(url);
    },
    },
     created(){
      this.getHandleList()
    },  
}
</script>

<style>
.my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
  .el-size{
    width: 20px;
  }
  .el-pagination {
    text-align: center; 
}
</style>
